<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>

    <!-- 
    v-bind和v-model的区别和联系
    1.v-bind和v-model这两个指令都可以完成数据的绑定
    2.v-bind是单向数据绑定，data ====> 视图
      v-model是双向数据绑定，视图 <====> data
    4.v-bind可以使用在任何html标签当中，v-model只能用在表单元素当中，例如input、select、textarea等
      为什么v-model的使用会有这样的限制？
      因为v-model是专门为表单元素设计的，而表单元素的value属性是专门为表单元素设计的，所以v-model只能用在表单元素当中 
      v-model指令通常也是用在value属性上的
    5.v-model和v-bind都有简写方式
         v-model: <input type="text" v-model:value="msg1">
         v-model: <input type="text"  v-model="msg1">
    

    -->
    <div class="app">
        v-bind: <input type="text" :value="msg">
        <br>
        v-model: <input type="text" v-model:value="msg1">
        <br>
        v-model: <input type="text"  v-model="msg1">

        </input>
    </div>
</body>
<script>
    new Vue({
        el:".app",
        data:{
            msg:"hello",
            msg1:"hello"
        }
    })
</script>
</html>